<template>
<el-card style="height: 40%;width: 100%">
  <div class="mod-config">
    <!-- 教育经历 -->
    <div class="warp__2BP03">
      <div class="warp__1CDpL">
          <div class="warp_l__34yS8">
          ♊&nbsp;&nbsp;<span class="work__00001">教育经历</span>
        </div>
        <div class="warp_r__1-t6m" v-if="opensourse==1">
          <img class="icon_style__xOInT" alt="" src="">
          <span @click="addeducationopen">添加</span>
        </div>
      </div>
    </div>
    <div style="width: 150px; height: 50px;"></div>
    <div style="width: 700px; height: 350px;background: #F2F6FC;" v-if="opensourse==2">
      <div style="width: 500px; height: 50px;padding-top: 20px;padding-bottom: 50px"><font style="font-size:20px;line-height: 20px;padding-left: 30px;margin-top: 10px;" color="green">添加教育经历</font></div>
      <el-form ref="form" :model="education" label-width="80px" style="padding-left:30px">
        <el-form-item label="学校名称">
          <el-input v-model="education.schoolName"></el-input>
        </el-form-item>
        <el-form-item label="在校时间">
            <el-date-picker type="date" placeholder="入学时间" v-model="education.schoolInDate" style="width: 25%;"></el-date-picker>
            <el-date-picker type="date" placeholder="毕业时间" v-model="education.schoolOutDate" style="width: 25%;"></el-date-picker>
            <font style="padding-left: 30px; padding-right: 30px">学历</font>
             <el-select v-model="education.education" style="width:30%">
              <el-option label="大专" value="大专"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="博士" value="博士"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="专业名称">
          <el-input v-model="education.majorName" placeholder="请输入所学专业"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addeducation">确认</el-button>
          <el-button @click="opensourse=1">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 回显 -->
    <div style="width: 700px; height: 350px;background: #F2F6FC;" v-if="updateeducationopen==2">
      <div style="width: 500px; height: 50px;padding-top: 20px;padding-bottom: 50px"><font style="font-size:20px;line-height: 20px;padding-left: 30px;margin-top: 10px;" color="green">添加教育经历</font></div>
      <el-form ref="form" :model="educationupdate" label-width="80px" style="padding-left:30px">
        <el-form-item label="学校名称">
          <el-input v-model="educationupdate.schoolName"></el-input>
        </el-form-item>
        <el-form-item label="在校时间">
            <el-date-picker type="date" placeholder="入学时间" v-model="educationupdate.schoolInDate" style="width: 25%;"></el-date-picker>
            <el-date-picker type="date" placeholder="毕业时间" v-model="educationupdate.schoolOutDate" style="width: 25%;"></el-date-picker>
            <font style="padding-left: 30px; padding-right: 30px">学历</font>
             <el-select v-model="educationupdate.education" style="width:30%">
              <el-option label="大专" value="大专"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="博士" value="博士"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="专业名称">
          <el-input v-model="educationupdate.majorName" placeholder="请输入所学专业"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateeducationonsubmit">确认</el-button>
          <el-button @click="updateeducationopen=1,educationupdate={}">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 60px" v-for="(item,index) in educationList" :key="index" v-if="educationList!=null" v-show="item.id!=educationupdate.id">
      <font style="line-height:30px;padding-left:20px">{{item.schoolName}}</font><br>
      <font style="line-height:30px;padding-left:20px">{{item.education+"/"+item.majorName}}</font>
      <a style="margin-right: 50px;float: right;">
        <img style="width: 20px; height: 20px" @click="deleducation(item.id)" class="icon_d__8fzmg" alt="" src="">
      </a>
      <a style="margin-right: 50px;float: right;">
        <img style="width: 20px; height: 20px" @click="updateeducation(item.id)" class="icon_e__36ON5" alt="" src="">
      </a>
    </div>
  </div>
  </el-card>
</template>

<script>
import ueditor from 'ueditor'
export default {
  inject:['reload'],
  name:'education',
  
  data(){
    return{
      opensourse:1,
      education:{
        schoolName:null,
        schoolInDate:null,
        schoolOutDate:null,
        education:null,
        majorName:null,
        resumeId:null
      },
      resumeId:null,
      educationupdate:{},
      educationList:[],
      updateeducationopen:1,
      user:{},
      resume:{}
    }
  },
  methods:{
    deleducation(id){
       this.$emit('delPercentage');
      this.$http({
              url: this.$http.adornUrl(`/resume/educationexperience/deleteById/${id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              
              this.reload();
            })
    },
    findByresumeId(){
      //this.user = JSON.parse(localStorage.getItem('user'));
      this.resume = JSON.parse(localStorage.getItem("resume"))
      this.$http({
              url: this.$http.adornUrl(`/resume/educationexperience/findByresumeId/${this.resume.id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              console.log(data);
              if( data.educationList!=''){
              this.educationList = data.educationList;
                this.$emit('resumTest')
              }
              
            })
    },
    addeducationopen(){
       if(this.updateeducationopen==2){
         this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.opensourse = 2;
          this.updateeducationopen=1;
        }).catch(() => {
        });
      }
      this.opensourse = 2;
      this.educationupdate = {};
    },
    addeducation(){
      this.$http({
              url: this.$http.adornUrl("/resume/educationexperience/save/"),
              method: 'post',
              data: this.$http.adornData({
                'schoolName': this.education.schoolName,
                'schoolInDate': this.education.schoolInDate,
                'schoolOutDate': this.education.schoolOutDate,
                'education': this.education.education,
                'majorName': this.education.majorName,
                'resumeId': this.resume.id,
              })
            }).then(({data}) => {
             this.reload();
              this.opensourse = 1;
            })
    },
    updateeducationonsubmit(){
      this.$http({
              url: this.$http.adornUrl("/resume/educationexperience/update/"),
              method: 'post',
              data: this.$http.adornData({
                'id': this.educationupdate.id,
                'schoolName': this.educationupdate.schoolName,
                'schoolInDate': this.educationupdate.schoolInDate,
                'schoolOutDate': this.educationupdate.schoolOutDate,
                'education': this.educationupdate.education,
                'majorName': this.educationupdate.majorName,
                'resumeId': this.resume.id,
              })
            }).then(({data}) => {
              this.updateeducationopen = 1;
               this.reload();
              this.educationupdate = {};
            })
    },
    updateeducation(id){
      if(this.opensourse==2){
         this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.opensourse = 1;
          this.updateeducationopen=2;
        }).catch(() => {
        });
      }
      this.$http({
              url: this.$http.adornUrl(`/resume/educationexperience/info/${id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              this.educationupdate = data.educationExperience;
              this.updateeducationopen = 2;
            })
    }
  },
  mounted(){
    this.findByresumeId();
  }
}
</script>




<style lang="scss">
  .mod-demo-ueditor {
    position: relative;
    z-index: 510;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
  .mod-home {
    line-height: 1.5;
  }
  .warp__1CDpL .warp_r__1-t6m .icon_style__xOInT {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
  }

  .warp__1CDpL .warp_l__34yS8 {
    float: left;
  }

  .warp__1CDpL .warp_r__1-t6m {
    margin-right: 50px;
    float: right;
    font-size: 14px;
    font-weight: 400;
    color: #02B28A;
    line-height: 28px;
    cursor: pointer;
  }

  .a1{
    border-left: 3px solid #00B38A;
    height: 16px;
    position: absolute;
    top: 24px;
    left: 30px;
  }

  .work__00001{
    font-size: 20px;
    font-weight: 600;
    color: #040404;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

